<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
        <%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>极目商城首页</title>
<link href="css/forword.css" type="text/css" rel="stylesheet">
<!-- 样式表外部引入 -->
<style type="text/css">

/* 滚动翻页的广告 */
body,div,ul,li{margin:0;padding:0;}
ul{list-style-type:none;}
body{text-align:center;font:12px/20px Arial;}
#ad{position:relative;width:492px;height:172px;background:#fff;border-radius:5px;border:8px solid #fff;margin:0px auto;cursor:pointer;}
#ad .list{position:relative;width:490px;height:170px;overflow:hidden;}
#ad .list ul{position:absolute;top:0;left:0;}
#ad .list li{width:490px;height:170px;overflow:hidden;}
#ad .count{position:absolute;right:0;bottom:5px;}
#ad .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;}
#ad .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}
#tmp{width:100px;height:100px;background:red;position:absolute;}

/* 级联菜单 */
/* common styling */
.menu {font-family: arial, sans-serif; width:120px; height:150px; position:relative; margin:0; font-size:22px; margin:0px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:150px; height:40px; text-align:center; color:#fff; border:1px solid #aaa; background:#FF3030; line-height:40px; font-size:16px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-left:0px; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:150px; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#fff;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#FF6347; color:#fff;}
.menu ul li:hover ul li a:hover {background:#36f; color:#fff;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}

body,div,ul,li{margin:0;padding:0;}
ul{list-style-type:none;}

</style>
<script type="text/javascript">

function confirmDel(str){   
	 return confirm(str);   
		} 

//获取ID
var $ = function (id) {return typeof id === "string" ? document.getElementById(id) : id};
//获取tagName
var $$ = function (tagName, oParent) {return (oParent || document).getElementsByTagName(tagName)};
//自动播放对象
var AutoPlay = function (id) {this.initialize(id)};
AutoPlay.prototype = {
	initialize: function (id)
	{
		var oThis = this;
		this.oBox = $(id);
		this.oUl = $$("ul", this.oBox)[0];
		this.aImg = $$("img", this.oBox);
		this.timer = null;
		this.autoTimer = null;
		this.iNow = 0;
		this.creatBtn();
		this.aBtn = $$("li", this.oCount);
		this.toggle();
		this.autoTimer = setInterval(function ()
		{
			oThis.next()
		}, 3000);
		this.oBox.onmouseover = function ()
		{
			clearInterval(oThis.autoTimer)
		};
		this.oBox.onmouseout = function ()
		{
			oThis.autoTimer = setInterval(function ()
			{
				oThis.next()
			}, 3000)
		};
		for (var i = 0; i < this.aBtn.length; i++)
		{
			this.aBtn[i].index = i;
			this.aBtn[i].onmouseover = function ()
			{
				oThis.iNow = this.index;
				oThis.toggle()
			}
		}
	},
	creatBtn: function ()
	{
		this.oCount = document.createElement("ul");
		this.oFrag = document.createDocumentFragment();
		this.oCount.className = "count";
		for (var i = 0; i < this.aImg.length; i++)
		{
			var oLi = document.createElement("li");
			oLi.innerHTML = i + 1;
			this.oFrag.appendChild(oLi)
		}
		this.oCount.appendChild(this.oFrag);
		this.oBox.appendChild(this.oCount)
	},
	toggle: function ()
	{
		for (var i = 0; i < this.aBtn.length; i++) this.aBtn[i].className = "";
		this.aBtn[this.iNow].className = "current";
		this.doMove(-(this.iNow * this.aImg[0].offsetHeight))
	},
	next: function ()
	{
		this.iNow++;
		this.iNow == this.aBtn.length && (this.iNow = 0);
		this.toggle()
	},
	doMove: function (iTarget)
	{
		var oThis = this;
		clearInterval(oThis.timer);
		oThis.timer = setInterval(function ()
		{
			var iSpeed = (iTarget - oThis.oUl.offsetTop) / 5;
			iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
			oThis.oUl.offsetTop == iTarget ? clearInterval(oThis.timer) : (oThis.oUl.style.top = oThis.oUl.offsetTop + iSpeed + "px")
		}, 30)
	}
};
window.onload = function ()
{
	new AutoPlay("ad");
};

var Marquee=function(){this.ID=document.getElementById(arguments[0]);this.Direction=arguments[1];this.Step=arguments[2];this.BakStep=arguments[2];this.Width=arguments[3];this.HalfWidth=Math.round(arguments[3]/2);this.Height=arguments[4];this.Timer=arguments[5];this.DelayTime=arguments[6];this.WaitTime=arguments[7];if(arguments[8] || arguments[8]==0){this.ScrollStep=arguments[8];}else{this.ScrollStep=this.Direction>1?this.Width:this.Height;}this.Correct=0;this.CTL=0;this.StartID=0;this.Stop=0;this.MouseOver=0;this.ID.style.overflow="hidden";this.ID.style.overflowX="hidden";this.ID.style.overflowY="hidden";this.ID.noWrap=true;this.ID.style.width=this.Width+"px";this.ID.style.height=this.Height+"px";this.ClientScroll=this.Direction>1?parseInt(this.ID.scrollWidth):parseInt(this.ID.scrollHeight);this.ID.innerHTML+=this.ID.innerHTML;this.IsNotOpera=(navigator.userAgent.toLowerCase().indexOf("opera")==-1);if(arguments.length>=8){this.Start(this,this.Timer,this.DelayTime,this.WaitTime);}}
Marquee.prototype.Start=function(msobj,timer,delaytime,waittime){
msobj.StartID=function(){msobj.Scroll();};
msobj.Continue=function(){if(msobj.MouseOver==1){setTimeout(msobj.Continue,delaytime);}else{clearInterval(msobj.TimerID);msobj.CTL=0;msobj.Stop=0;msobj.TimerID=setInterval(msobj.StartID,timer);}};
msobj.Pause=function(){msobj.Stop=1;clearInterval(msobj.TimerID);setTimeout(msobj.Continue,delaytime);};
msobj.Begin=function(){
msobj.ID.onmousemove=function(evt){if(msobj.ScrollStep==0 && msobj.Direction>1){var event=null;if(window.event){event=window.event;if(msobj.IsNotOpera){msobj.EventLeft=event.srcElement.id==msobj.ID.id?parseInt(event.offsetX)-parseInt(msobj.ID.scrollLeft):parseInt(event.srcElement.offsetLeft)-parseInt(msobj.ID.scrollLeft)+parseInt(event.offsetX);}else{msobj.ScrollStep=null;return;}}else{event=evt;msobj.EventLeft=parseInt(event.layerX)-parseInt(msobj.ID.scrollLeft);}msobj.Direction=msobj.EventLeft>msobj.HalfWidth?3:2;msobj.AbsCenter=Math.abs(msobj.HalfWidth-msobj.EventLeft);msobj.Step=Math.round(msobj.AbsCenter*(msobj.BakStep*2)/msobj.HalfWidth);}};
msobj.ID.onmouseover=function(){if(msobj.ScrollStep==0){return;}msobj.MouseOver=1;clearInterval(msobj.TimerID);};
msobj.ID.onmouseout=function(){if(msobj.ScrollStep==0){if(msobj.Step==0){msobj.Step=1;}return;}msobj.MouseOver=0;if(msobj.Stop==0){clearInterval(msobj.TimerID);msobj.TimerID=setInterval(msobj.StartID,timer);}};msobj.TimerID=setInterval(msobj.StartID,timer);};setTimeout(msobj.Begin,waittime);}
Marquee.prototype.Scroll=function(){if(this.Correct==0 && this.CTL>this.ClientScroll){this.ClientScroll=(this.Direction>1)?Math.round(parseInt(this.ID.scrollWidth)/2):Math.round(parseInt(this.ID.scrollHeight)/2);this.Correct=1;}switch(this.Direction){case 0:{this.CTL+=this.Step;if(this.CTL>=this.ScrollStep && this.DelayTime>0){this.ID.scrollTop+=(this.ScrollStep+this.Step-this.CTL);this.Pause();return;}else{if(this.ID.scrollTop>=this.ClientScroll){this.ID.scrollTop-=this.ClientScroll;}this.ID.scrollTop+=this.Step;}break;}case 1:{this.CTL+=this.Step;if(this.CTL>=this.ScrollStep && this.DelayTime>0){this.ID.scrollTop-=(this.ScrollStep+this.Step-this.CTL);this.Pause();return;}else{if(this.ID.scrollTop<=0){this.ID.scrollTop+=this.ClientScroll;}this.ID.scrollTop-=this.Step;}break;}case 2:{this.CTL+=this.Step;if(this.CTL>=this.ScrollStep && this.DelayTime>0){this.ID.scrollLeft+=(this.ScrollStep+this.Step-this.CTL);this.Pause();return;}else{if(this.ID.scrollLeft>=this.ClientScroll){this.ID.scrollLeft-=this.ClientScroll;}this.ID.scrollLeft+=this.Step;}break;}case 3:{this.CTL+=this.Step;if(this.CTL>=this.ScrollStep && this.DelayTime>0){this.ID.scrollLeft-=(this.ScrollStep+this.Step-this.CTL);this.Pause();return;}else{if(this.ID.scrollLeft<=0){this.ID.scrollLeft+=this.ClientScroll;}this.ID.scrollLeft-=this.Step;}break;}this.ID.scrollTop+="px";this.ID.scrollLeft+="px";}}

//推荐商品
function $ (id)
{
	return typeof id === "string" ? document.getElementById(id) : id;
}
//获取tagName
function $$ (elem, oParent)
{
	return (oParent || document).getElementsByTagName(elem);
}
//获取class
function $$$ (className, oParent)
{
	var aClass = [];
	var reClass = new RegExp("(//s|^)" + className + "($|//s)");
	var aElem = $$("*", oParent);
	for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
	return aClass
}
//初始化对象
function Roll ()
{
	this.initialize.apply(this, arguments)
}
Roll.prototype =
{
	initialize: function (obj)
	{
		var _this = this;
		this.obj = $(obj);
		this.oUp = $$$("up", this.obj)[0];
		this.oDown = $$$("down_zzjs__net", this.obj)[0];
		this.oList = $$$("list_wwwzzjsnet", this.obj)[0];
		this.aItem = this.oList.children;
		this.timer = null;
		this.iHeight = this.aItem[0].offsetHeight;
		this.oUp.onclick = function ()
		{
			_this.up()
		};
		this.oDown.onclick = function ()
		{
			_this.down()
		}
	},
	up: function ()
	{
		this.oList.insertBefore(this.aItem[this.aItem.length - 1], this.oList.firstChild);
		this.oList.style.top = -this.iHeight + "px";
		this.doMove(0)
	},
	down: function ()
	{
		this.doMove(-this.iHeight, function ()
		{
			this.oList.appendChild(this.aItem[0]);
			this.oList.style.top = 0;
		})
	},
	doMove: function (iTarget, callBack)
	{
		var _this = this;
		clearInterval(this.timer)
		this.timer = setInterval(function ()
		{
			var iSpeed = (iTarget - _this.oList.offsetTop) / 5;
			iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
			_this.oList.offsetTop == iTarget ? (clearInterval(_this.timer), callBack && callBack.apply(_this)) : _this.oList.style.top = iSpeed + _this.oList.offsetTop + "px"
		}, 30)
	}
};
window.onload = function ()
{
	new Roll("tbox");
};
</script>
</head>
<body >
<!-- 头部包含文件 -->
<%@include file="../commonq/head.jsp" %>
<table>
<tr>
<td>
	<div id="ad" style="height:170px;">
		<div class="list">
	        <ul>
	            <li><img src="photo/advertis/t1.jpg" width="490" height="170" /></li>
	            <li><img src="photo/advertis/t2.jpg" width="490" height="170" /></li>
	            <li><img src="photo/advertis/t3.jpg" width="490" height="170" /></li>
	            <li><img src="photo/advertis/t4.jpg" width="490" height="170" /></li>
	            <li><img src="photo/advertis/t5.jpg" width="490" height="170" /></li>
	        </ul>
	    </div>
	</div>
	</td>
	<td>
		<fieldset style="padding:0px;width:770px">
		
<legend style="font-size:20px;color:red"><b>决定买哪个了吗？</b></legend>
<center>
	<nobr>
		<div id="marqueedivmouse" style="width:760px;overflow:auto;">
			<img src="image/buy.jpg" style="width:126px;height:138px" border="0" hspace="1">
			<img src="image/doge.jpg" style="width:126px;height:138px" border="0" hspace="1">
			<img src="image/doge1.jpg" style="width:126px;height:138px" border="0" hspace="1">
			<img src="image/doge.jpg" style="width:126px;height:138px" border="0" hspace="1">
			<img src="image/doge1.jpg" style="width:126px;height:138px" border="0" hspace="1">
			<img src="image/doge.jpg" style="width:126px;height:138px" border="0" hspace="1">
			<img src="image/doge1.jpg" style="width:126px;height:138px" border="0" hspace="1">
			<img src="image/doge.jpg" style="width:126px;height:138px" border="0" hspace="1">
			<img src="image/doge1.jpg" style="width:126px;height:138px" border="0" hspace="1">
		</div>
	</nobr>
</center>
<script type="text/javascript">
try{
new Marquee("marqueedivmouse",2,4,640,138,20,0,3000,0);
}catch(e){alert(e.message);}
new Marquee("textdiv",0,1,640,42,20,4000,5000);
new Marquee("textdiv1",0,1,640,42,20,4000,5000,14);
new Marquee("marqueediv1",0,1,640,138,50,4000,500);
new Marquee("marqueediv2",1,2,640,138,50,4000,500);
new Marquee("marqueediv3",2,20,640,138,20,4000,5000);
new Marquee("marqueediv4",3,10,640,138,20,4000,500);
new Marquee("marqueediv5",0,1,640,138,30,0,0);
new Marquee("marqueediv6",2,1,640,138,20,0,0);
new Marquee("marqueediv7",0,1,640,138,50,4000,500,138);
new Marquee("marqueediv8",2,20,640,138,20,4000,5000,128);
</script>
</fieldset>
	</td>
</tr>
</table>
<table>
<tr>
	<td>
	<%@include file="../commonq/menu.jsp" %>	
	</td>
	<td style="position:absolute;padding-top:20px;padding-left:15px;width:980px;">
		<!-- 商品展示 -->
		<%@include file="../commonq/showProd.jsp" %>
	</td>
	<td style="position:absolute;margin-left:1000px;">
		<div id="tbox">
		    <span class="up">up</span>
		    <span class="down_zzjs__net">down</span>
		    	<h2 style="color:red;"><strong>热销商品！</strong></h2>
		    <div>
		        <ul class="list_wwwzzjsnet">
		        	<s:iterator value="hostList">
		            <li>
		            	<a href="qprodDetail.action?productid=<s:property value="productid"/>">
	      				  <img alt="<s:property value="productname"/>" src="photo/product/<s:property value="photo"/>">
	      				  <s:property value="productname"/>  
	      				</a>
		            </li>
		            </s:iterator>
		        </ul>
		    </div>
		</div>
	</td>
</tr>
</table>				
<%@include file="../commonq/tail.jsp" %>
</body>
</html>